<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Suporka carousal</title>
    <style>
      #suporka-dot .suporka-dot--acitve {
        background: red !important;
      }
      img {
        width: 557px;
        height: 240px;
      }
    </style>
  </head>

  <body>
    <div id="carousal">
      <button
        type="button"
        class="suporka-carousel__arrow suporka-carousel__arrow--left"
        style=""
        id="suporka-prev-btn"
      >
        &lt;
      </button>
      <div id="wrapper">
        <div class="box"><img src="./banner1.jpg" alt="" /></div>
        <div class="box"><img src="./banner2.jpg" alt="" /></div>
        <div class="box"><img src="./banner3.jpg" alt="" /></div>
        <div class="box"><img src="./banner4.jpg" alt="" /></div>
      </div>
      <button
        type="button"
        class="suporka-carousel__arrow suporka-carousel__arrow--right"
        style=""
        id="suporka-next-btn"
      >
        &gt;
      </button>
    </div>
    <!-- <script type="text/javascript" src="carousal-dev.js"></script> -->
    <!-- <script type="text/javascript" src="carousal.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/suporka-carousal@1.0.3/carousal.js"></script>
    <script>
      new Carousal({
        autoScroll: true,
        showDot: true
      });
    </script>
  </body>
</html>
